<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        label{
            color: red;
        }
    </style>
</head>
<script src="../static/jquery.js"></script>
<script src="../static/additional-methods.js"></script>
<script src="../static/jquery.validate.js"></script>
<script src="../static/messages_zh.js"></script>
<script src="../static/jquery.validate.extend.js"></script>
<script>
    window.onload = function () {

    };
    $(document).ready(function () {

    });

    $(function () {
        let validate =  $("form").validate({
            rules: {
                account: {
                    required: true,
                    minlength: 3,
                    // maxlength: 10
                },
                phone: {
                    required: true,
                    phone: true
                },
                password: {
                    required: true,
                    min: 1,
                    // max: 5
                },
                password1: {
                    required: true,
                    equalTo: '#pwd'
                },
                sex: 'required'
            },
            messages: {
                sex: {
                    required: '请选择性别'
                }
            },
            submitHandler: function (form) {
                // alert("事件触发")
                let objStr = $("#form").serialize();
                console.log(objStr)
                $.ajax({
                    // 类型
                    type: 'post',
                    // url
                    url: 'https://api.apiopen.top/api/login',
                    // 参数
                    // data: data,
                    data: objStr,
                    // 响应类型
                    dataType: 'json',
                    // 响应回调
                    success: function (res) {
                        console.log(res)
                        restForm()
                    }
                })
            },
            // errorPlacement: function (error, element) {
            //     error.appendTo(element.parent());
            // }
        })

        $("#reset").click(function () {
            // 重置校验
            validate.resetForm()
        });
        function restForm() {
            $("#account").val('')
            $("#pwd").val('')
            $("#pwd1").val('')
            $("#sex").val('')
        }
    });


</script>
<body>
<form id="form" onsubmit="return checkData()">
    <div>
        账号：<input id="account" type="text" name="account"><br>
    </div>
    手机号：<input id="phone" type="text" name="phone"><br>
    密码：<input id="pwd" type="password" name="password"><br>
    确认密码：<input id="pwd1" type="password" name="password1"><br>
    性别：<select id="sex" name="sex">
    <option value="">请选择</option>
    <option value="1">男</option>
    <option value="0">女</option>
</select><br>
    <input type="submit">
    <input type="reset" id="reset">
</form>
</body>

<script>

    }


</script>
</html>